<template>
  <div class="container">
    <div>
        <Header></Header>  <!--首页头部导航-->
        <Swiper :list="swiperList"></Swiper><!--首页轮播-->
        <Icon  :list="iconList"></Icon><!--首页图标切换导航只是渲染 未做功能-->
        <Recommend :list="recommendList"></Recommend><!--首页推荐导航，可以跳转到详情页-->
        <Week :list="weekendList"></Week><!--首页每周推荐，未做功能-->
    </div>
  </div>
</template>

<script>

import { mapState } from 'vuex'

import Header from '@/components/home/Header.vue' //引入header组件
import Swiper from "@/components/home/Swiper"; //引入swiper组件
import Icon from '@/components/home/Icon' //引入icon组件
import Recommend from '@/components/home/Recommend' //引入recommend组件
import Week from '@/components/home/Week' //引入week组件city
export default {
  components: {
    Header,
    Swiper,
    Icon,
    Recommend,
    Week
  },
  async created() {
  },
  data () {
    return {
      swiperList: [],
      iconList: [],
      recommendList: [],
      weekendList: []
    }
  },

  computed: {
    ...mapState(['city'])
  },

  async asyncData (context) {
    //请求后台数据 这里注意了参数必须使用config配置项 如果直接拼接字符串会有bug
    const { data } = await context.app.$axios.get("/app/api/index.json",{params:{city:context.app.store.state.city}})
    return  {
      swiperList:data.data.swiperList, //得到轮播图数据
      iconList:data.data.iconList, //得到导航数据
      recommendList:data.data.recommendList,//得到推荐数据
      weekendList:data.data.weekendList//得到周推荐数据
    }
  },
}
</script>

<style lang="stylus">

</style>
